<template>
  <div class="d-flex home-top-right">
    <div class="home-top-nav fs-12 py-14 px-12">
      <a href="#" class="text-ftcolor-1">我的美团</a>
      <dl class="fade-in">
        <dd class="py-8"><a href="#" class="text-ftcolor-1">我的订单</a></dd>
        <dd class="py-8"><a href="#" class="text-ftcolor-1">我的收藏</a></dd>
        <dd class="py-8"><a href="#" class="text-ftcolor-1">抵用券</a></dd>
        <dd class="py-8"><a href="#" class="text-ftcolor-1">账户设置</a></dd>
      </dl>
    </div>
    <div class="home-top-nav speNav1 fs-12 px-12 py-14">
      <a href="#" class="text-ftcolor-1">手机APP</a>
    </div>
    <div class="home-top-nav fs-12 px-12 py-14">
      <a href="#" class="text-ftcolor-1">商家中心</a>
      <dl class="fade-in">
        <dd class="py-8"><a href="#" class="text-ftcolor-1">登录商家中心</a></dd>
        <dd class="py-8"><a href="#" class="text-ftcolor-1">美团智能收银</a></dd>
        <dd class="py-8"><a href="#" class="text-ftcolor-1">我想合作</a></dd>
        <dd class="py-8"><a href="#" class="text-ftcolor-1">手机免费开店</a></dd>
        <dd class="py-8"><a href="#" class="text-ftcolor-1">餐饮代理招募</a></dd>
        <dd class="py-8"><a href="#" class="text-ftcolor-1">商家申请开发票</a></dd>
        <dd class="py-8"><a href="#" class="text-ftcolor-1">免费合作美团排队</a></dd>
      </dl>
    </div>
    <div class="home-top-nav fs-12 px-12 py-14">
      <a href="#" class="text-ftcolor-1">美团规则</a>
      <dl class="fade-in d-flex">
        <dd class="py-8"><a href="#" class="text-ftcolor-1">规则中心</a></dd>
        <dd class="py-8"><a href="#" class="text-ftcolor-1">规则目录</a></dd>
        <dd class="py-8"><a href="#" class="text-ftcolor-1">规则评议院</a></dd>
      </dl>
    </div>
    <div class="home-top-nav fs-12 px-12 py-14">
      <a href="#" class="text-ftcolor-1">网站导航</a>
      <dl class="fade-in">
        <dd class="py-30 px-20 d-flex jc-around">
          <div style="width:30%">
            <p>酒店旅游</p>
            <div class="mt-20 d-flex flex-wrap ai-center">
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:33.33%">国际机票</a>
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:33.33%">机票</a>
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:33.33%">国际机票</a>
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:33.33%">机票</a>
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:33.33%">机票</a>
            </div>
          </div>
          <div style="width:20%">
            <p>酒店旅游</p>
            <div class="mt-20 d-flex flex-wrap ai-center">
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:50%">国际机票</a>
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:50%">机票</a>
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:50%">国际机票</a>
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:50%">机票</a>
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:50%">机票</a>
            </div>
          </div>
          <div style="width:10%">
            <p>酒店旅游</p>
            <div class="mt-20 d-flex flex-wrap ai-center">
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:100%">国际机票</a>
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:100%">机票</a>
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:100%">国际机票</a>
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:100%">机票</a>
              <a href="#" class="px-5 py-5 text-ftcolor-2" style="width:100%">国际机票</a>
            </div>
          </div>
          <div class="flex-1">
            <p>手机应用</p>
            <div class="mt-20 d-flex jc-around ai-center">
              <a href="#" class="px-10 py-5 text-ftcolor-2"><img style="width:60px" src="https://img-blog.csdnimg.cn/20190323161159133.png" alt=""></a>
              <a href="#" class="px-10 py-5 text-ftcolor-2"><img style="width:60px" src="https://img-blog.csdnimg.cn/20190323161159133.png" alt=""></a>
              <a href="#" class="px-10 py-5 text-ftcolor-2"><img style="width:60px" src="https://img-blog.csdnimg.cn/20190323161159133.png" alt=""></a>
              <a href="#" class="px-10 py-5 text-ftcolor-2"><img style="width:60px" src="https://img-blog.csdnimg.cn/20190323161159133.png" alt=""></a>
              <a href="#" class="px-10 py-5 text-ftcolor-2"><img style="width:60px" src="https://img-blog.csdnimg.cn/20190323161159133.png" alt=""></a>
            </div>
          </div>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
@import '../../../assets/css/_varibles';

.home-top-right {
  .home-top-nav {
    text-align: center;
    position: relative;
    dl {
      display: none;
      background: map-get($colors, 'primary');
      position: absolute;
      right: 0;
      left: 0;
      top: 43px;
      z-index: 999;
      &:hover {
        display: block;
        a:hover {
          color: map-get($colors, 'primary');
        }
      }
    };
    &:hover {
      background: map-get($colors, 'white');
      &.speNav1 {
        background: map-get($colors, 'bgcolor');
      }
      > a:hover {
        color: map-get($colors, 'primary');
      }
      dl{
        display: block;
      }
    }
  }
  .home-top-nav:nth-child(3) {
    dl {
      left: -30px
    }
  }
  .home-top-nav:nth-child(5) {
    dl {
      left: -1118px;
    }
  }
}
</style>
